/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/typography.css");
@import url("taiga-ui/mixins/wrapper.css");

/********* BUTTON APPEARANCES ********
** WARNING: If you add an appearance list it here and ensure is on the design system with the same name

data-appearance
----------------

PRIMARY
Default primary buttons
Used across all Taiga

SECONDARY
Default secondary buttons
Used across all Taiga

TERTIARY
Default secondary buttons
Used across all Taiga

DESTRUCTIVE
Default buttons for remove or destroy something
Used across all Taiga

MAIN-NAV
Used on some buttons on the top navigation bar

HOME BUTTON
Used for the logo of the APP

BUTTON FORM
Used for the cancel button in the modal
Used only in some modal

ACTION BUTTON
Default close buttons in modals (X icon)
Used across all Taiga

ACTION BUTTON 2 (should be fixed)
Used only on the three dots of the kanban cards (icon more-vertical)
Used across all Taiga

SORT
Used only in comment list sort button

***************************************/

/* stylelint-disable selector-max-type */
/* stylelint-disable declaration-no-important */

[data-appearance="tertiary"]:is(button, a),
[data-appearance="destructive"]:is(button, a),
[data-appearance="secondary"]:is(button, a),
[data-appearance="primary"]:is(button, a),
[data-appearance="main-nav"]:is(button, a) {
  --tui-primary-text: var(--tui-text-01);

  transition-duration: 100ms !important;

  & [tuiWrapper] {
    border-radius: 4px;
    font-weight: var(--font-weight-medium);
    padding-block: 0 !important;
    padding-inline: var(--spacing-12) !important;
    transition: none;
  }

  &.large [tuiWrapper] {
    padding-block: 0 !important;
    padding-inline: var(--spacing-16) !important;
  }

  & tui-svg {
    block-size: 1rem;
    inline-size: 1rem;
  }

  & svg {
    block-size: 1rem;
    inline-size: 1rem;
  }

  & .t-left {
    inline-size: var(--spacing-16);
    margin: 0 !important;
    margin-inline-end: var(--spacing-4) !important;
  }

  & .t-right {
    inline-size: var(--spacing-16);
    margin: 0 !important;
    margin-inline-start: var(--spacing-4) !important;
  }

  &[tuiiconbutton] {
    & .t-left {
      inline-size: auto !important;
      margin: 0 !important;
    }

    & .t-right {
      margin: 0 !important;
    }

    & .t-icon {
      block-size: 1rem !important;
      inline-size: 1rem !important;
    }
  }

  &[tuiIconButton] [tuiWrapper] {
    padding: 0 !important;
  }
}

[data-appearance="tertiary"]:is(button, a) {
  @mixin button-dropdown-expanded {
    background: var(--color-gray30);
    color: var(--color-secondary90);
  }

  & [tuiWrapper] {
    background: var(--color-gray10);
    color: var(--color-secondary);

    @mixin wrapper-hover {
      background: var(--color-gray30);
      color: var(--color-secondary90);
    }

    @mixin wrapper-disabled {
      opacity: 50%;
    }

    @mixin wrapper-focus {
      &::after {
        border-color: var(--color-secondary);
        border-width: 1px;
      }
    }
  }

  & .notification-counter {
    align-items: center;
    background: var(--color-red);
    block-size: 1rem;
    border-radius: 100%;
    color: var(--color-white);
    display: flex;
    font-size: 0.6875rem;
    inline-size: 1rem;
    justify-content: center;
    margin-inline-start: var(--spacing-4);
    pointer-events: none;
  }
}

[data-appearance="small"]:is(button, a) {
  @mixin button-dropdown-expanded {
    background: var(--color-gray30);
    color: var(--color-secondary90);
  }

  & [tuiWrapper] {
    background: var(--color-gray10);
    block-size: auto !important;
    border-radius: 3px;
    color: var(--color-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    line-height: 0.875rem;
    padding-block: var(--spacing-4) !important;
    padding-inline: var(--spacing-8) !important;

    @mixin wrapper-hover {
      background: var(--color-gray30);
      color: var(--color-secondary90);
    }

    @mixin wrapper-focus {
      &::after {
        border-color: var(--color-secondary);
        border-width: 1px;
      }
    }
  }
}

[data-appearance="main-nav"]:is(button, a) {
  @mixin button-dropdown-expanded {
    background: var(--color-white);
    color: var(--color-secondary90);
  }

  & [tuiWrapper] {
    background: var(--color-gray10);
    color: var(--color-secondary);

    @mixin wrapper-hover {
      background: var(--color-white);
      color: var(--color-secondary90);
    }

    @mixin wrapper-disabled {
      opacity: 50%;
    }

    @mixin wrapper-focus {
      background: var(--color-white);
      color: var(--color-secondary90);

      & tui-svg {
        color: var(--color-secondary90);
      }

      &::after {
        border-color: var(--color-secondary);
        border-width: 1px;
      }
    }
  }

  & .notification-counter {
    align-items: center;
    background: var(--color-red);
    block-size: 1rem;
    border-radius: 100%;
    color: var(--color-white);
    display: flex;
    font-size: 0.6875rem;
    inline-size: 1rem;
    justify-content: center;
    margin-inline-start: var(--spacing-4);
    pointer-events: none;
  }
}

[data-appearance="destructive"]:is(button, a) {
  & [tuiWrapper] {
    background: var(--color-red);
    color: var(--color-white);

    @mixin wrapper-hover {
      background: var(--color-red80);
      color: var(--color-white);
    }

    @mixin wrapper-focus {
      &::after {
        border-color: var(--color-secondary);
        border-width: 1px;
      }
    }

    @mixin wrapper-disabled {
      opacity: 50%;
    }

    @mixin wrapper-active {
      background-color: var(--color-red80);
    }
  }
}

[data-appearance="secondary"]:is(button, a) {
  --tui-secondary: var(--color-gray30);
  --tui-secondary-hover: var(--color-gray40);
  --tui-secondary-active: var(--color-gray40);
  --tui-secondary-text: var(--color-gray80);
  --tui-link-hover: var(--color-gray90);

  & [tuiWrapper] {
    background-color: var(--color-gray30);
    color: var(--color-gray80);

    @mixin wrapper-focus {
      &::after {
        border-color: var(--color-secondary);
        border-width: 1px;
      }
    }

    @mixin wrapper-disabled {
      opacity: 50%;
    }
  }
}

[data-appearance="primary"]:is(button, a) {
  --tui-primary: var(--color-primary);
  --tui-primary-hover: var(--color-primary40);
  --tui-primary-active: var(--color-primary40);
  --tui-primary-text: var(--color-gray90);
  --tui-link-hover: var(--color-gray90);

  & [tuiWrapper] {
    color: var(--color-gray80);

    @mixin wrapper-focus {
      &::after {
        border-color: var(--color-secondary);
        border-width: 1px;
      }
    }

    @mixin wrapper-hover {
      background: var(--color-primary40);
      color: var(--color-secondary90);
    }
  }

  &:not([loading]) [tuiWrapper] {
    @mixin wrapper-disabled {
      opacity: 50%;
    }
  }

  &[loading] {
    &.loading-start,
    &.loading-in-progress {
      & [tuiWrapper] {
        background-color: var(--color-primary40);
      }
    }
  }

  &[loading].loading-in-progress {
    padding: 0 !important;
    text-align: center;
  }

  &[loading].loading-done tui-svg {
    color: var(--color-ok50);
  }

  &.large[data-tui-host-size="l"] {
    block-size: 44px;

    & [tuiWrapper] {
      line-height: 1rem;
      padding-block: var(--spacing-12) !important;
      padding-inline: var(--spacing-16) !important;
    }
  }
}

[data-appearance="home-button"]:is(button, a) {
  transition-duration: 100ms !important;

  & [tuiWrapper] {
    background: none;
    color: var(--color-gray100);
    transition: none;

    @mixin wrapper-hover {
      background: none;
      color: var(--color-secondary);
    }

    @mixin wrapper-focus {
      &::after {
        border-color: var(--color-secondary);
        border-width: 1px;
      }
    }
  }

  & svg {
    block-size: 1.875rem;
    inline-size: 1.875rem;
  }
}

[data-appearance="navigation-action"]:is(button, a) {
  @mixin button-dropdown-expanded {
    background: var(--color-gray20);
    color: var(--color-secondary90);
  }

  transition-duration: 100ms !important;

  & [tuiWrapper] {
    background: none;
    border-radius: 3px;
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-4) !important;
    transition: none;

    @mixin wrapper-hover {
      background: var(--color-gray20);
      color: var(--color-secondary90);
    }

    @mixin wrapper-focus {
      --tui-focus: var(--color-secondary);

      color: var(--color-secondary);

      &::after {
        border-width: 1px;
      }
    }
  }
}

[data-appearance="button-form"]:is(button, a) {
  --tui-primary-hover: var(--color-gray20);
  --tui-secondary-hover: var(--color-gray20);
  --tui-link-hover: var(--color-gray20);

  transition-duration: 100ms !important;

  & [tuiWrapper] {
    background: none;
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-8) !important;
    transition: none;

    @mixin wrapper-hover {
      background: var(--color-gray20);
    }

    @mixin wrapper-focus {
      &::after {
        border-color: var(--color-secondary);
        border-width: 1px;
      }
    }
  }
}

[data-appearance="action-button"]:is(button, a),
[data-appearance="action-button-2"]:is(button, a),
[data-appearance="sort"]:is(button, a) {
  @mixin button-dropdown-expanded {
    background: var(--color-gray30);
    color: var(--color-secondary);
  }

  transition-duration: 100ms !important;

  & [tuiWrapper] {
    background: none;
    border-radius: 2px;
    color: var(--color-gray60);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-4) !important;
    transition: none;

    @mixin wrapper-hover {
      background: var(--color-gray20);
      color: var(--color-secondary90);
    }

    @mixin wrapper-focus {
      --tui-focus: var(--color-secondary);

      color: var(--color-secondary);

      &::after {
        border-width: 1px;
      }
    }
  }

  &[variant="dark"] {
    & [tuiWrapper] {
      color: var(--color-gray40);

      @mixin wrapper-hover {
        background: var(--color-gray80);
        color: var(--color-secondary40);
      }

      @mixin wrapper-focus {
        --tui-focus: var(--color-secondary50);

        color: var(--color-secondary50);

        /* stylelint-disable-next-line max-nesting-depth */
        &::after {
          border-width: 2px;
        }
      }
    }
  }
}

[data-appearance="action-button-2"]:is(button, a) {
  border-radius: 2px;

  & tui-svg {
    block-size: 1rem;
    inline-size: 1rem;
  }

  @mixin button-dropdown-expanded {
    color: var(--color-secondary90);
  }
}

[data-appearance="sort"]:is(button, a) {
  & tui-svg {
    block-size: 1rem;
    inline-size: 1rem;
  }

  & [tuiWrapper] {
    border-radius: 4px;
  }
}

[tuiLink]:is(button, a) {
  align-items: center;
  display: flex;
  transition-duration: 100ms !important;

  &.small {
    @mixin wrapper-content {
      font-size: var(--font-size-small);
      line-height: 1.15rem;
    }
  }

  &._focus-visible {
    border-radius: 0;
    outline: none;

    @mixin wrapper-content {
      background: none !important;
    }
  }

  &[icon] {
    padding-block: var(--spacing-8);
    padding-inline: var(--spacing-8);

    &._focus-visible {
      @mixin wrapper-content {
        outline: none;
      }
    }
  }

  &.empty {
    pointer-events: none;

    @mixin wrapper-content {
      color: var(--color-gray70);
      font-weight: var(--font-weight-regular);
    }
  }

  @mixin wrapper-content {
    @mixin font-paragraph;

    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
    transition: color 0.1s ease-in-out;
  }

  & .t-icon {
    block-size: 1rem;
    color: var(--color-secondary);
    inline-size: 1rem;
    margin-block-start: 0 !important;
  }

  & svg {
    transition: fill 0.1s ease-in-out;
  }

  &:hover {
    @mixin wrapper-content {
      color: var(--color-secondary90);
      transition: color 0.1s ease-in-out;
    }

    & tui-svg {
      color: var(--color-secondary90);
      transition: fill 0.1s ease-in-out;
    }
  }
}

/* _focus-visible show up with javascript focus but it may be a mouse user, with user-keyboard class we force only keyboard users */
.user-keyboard [tuiLink]:is(button, a) {
  &._focus-visible {
    @mixin wrapper-content {
      outline: solid 1px var(--color-secondary);
    }
  }

  &[icon] {
    &._focus-visible {
      border-radius: 4px;
      outline: solid 1px var(--color-secondary);
    }
  }
}

.external-link {
  align-items: center;
  display: inline-flex;

  &:hover {
    & tui-svg {
      color: var(--color-secondary90);
    }
  }

  & .external-svg {
    align-items: center;
    display: inline-flex;
    margin-inline-start: var(--spacing-4);
  }

  & tui-svg {
    color: var(--color-secondary);
  }
}

[tuiWrapper][data-appearance="icon"] {
  opacity: 1;
}
